<template>
    <!--定义根节点-->
    <div class="login wrapper">
      <div class="container">
        <!--定义区块-->
        <section class="single-login">
          <!--定义背景图片-->
          <div class="banner">
            <div class="banner-background">
              <img src="../assets/images/login_banner.png" alt="后台管理系统" class="background-img"/>
            </div>
          </div>
          <!--登录-->
          <div class="slider-login">
            <div class="slider-login-wrapper">
                <div class="item" :class="{focus: fieldClass.usernameFocus, error: fieldClass.usernameError }">
                    <div class="label"><span class="glyphicon glyphicon-user"></span></div>
                    <div class="text">
                      <input type="text" name="userName" autocomplete="off" v-model.trim="loginForm.userName" placeholder="请输入账号" @focus="fieldClass.usernameFocus = true" @blur="fieldClass.usernameFocus = false" @keydown="fieldClass.usernameError = false; errorMsg=''" maxlength="30"/>
                    </div>
                </div>
                <div class="item" :class="{focus: fieldClass.passwordFocus, error: fieldClass.passwordError }">
                  <div class="label"><span class="glyphicon glyphicon-lock"></span></div>
                  <div class="text">
                    <input type="password" name="password" autocomplete="off" v-model.trim="loginForm.password" placeholder="请输入密码" @focus="fieldClass.passwordFocus = true" @blur="fieldClass.passwordFocus = false" @keydown="fieldClass.usernameError = false; errorMsg=''" maxlength="30"/>
                  </div>
                </div>
                <div class="item item-half" :class="{focus: fieldClass.codeFocus, error: fieldClass.codeError }">
                  <div class="label"><span class="glyphicon glyphicon-qrcode"></span></div>
                  <div class="text">
                    <input type="text" name="code" autocomplete="off" v-model.trim="loginForm.code" placeholder="请输入验证码" @focus="fieldClass.codeFocus = true" @blur="fieldClass.codeFocus = false" @keydown="fieldClass.codeError=false;errorMsg = ''" @keyup.enter="doLogin" maxlength="4"/>
                  </div>
                  <div class="captcha">
                    <img src="#" id="captchaImg" height="40" width="77" alt="点击更换"/>
                    <a href="javascript:void(0)" @click="refreshCaptcha">
                      换一张
                      <span class="refresh icon-captcha"></span>
                    </a>
                  </div>
                </div>
                <div class="errorMsg">{{errorMsg}}</div>
                <div class="submit" id="login-form">
                  <a href="javascript:;" class="btn btn-primary" @click="doLogin">进&nbsp;&nbsp;入</a>
                  <a href="javascript:;" class="btn btn-default" @click="doReset">重&nbsp;&nbsp;置</a>
                </div>
            </div>
          </div>
        </section>
      </div>
    </div>
</template>

<script>
    export default {
        name: 'login',
        mounted: function () {
          var self = this;
          this.$nextTick(function () {
            self.refreshCaptcha();
          });
        },
        data(){
          return {
            loginForm: {
                userName:'',
                password:'',
                code:'',
                uuid:'',
            },
            fieldClass:{
                usernameFocus: false,
                usernameError: false,
                passwordFocus: false,
                passwordError: false,
                codeFocus: false,
                codeError: false,
            },
            errorMsg:''
          }
        },
        methods:{
          refreshCaptcha: function(){
            var self = this;
            self.$doGet("/captcha/imageAndUuid", null, function(respData){
              if(respData.code==self.global_config.SUCCESS_CODE){
                $('#captchaImg').attr("src","data:image/jpeg;base64," + respData.data.image);
                self.loginForm.uuid = respData.data.uuid;
              }
            });
          },
          doLogin: function(){
              var self = this;
              //按钮锁定校验
              if(self.$isLockedButton('login-form')){
                  return;
              }
              //非空校验
              if(!self.loginForm.userName){
                self.errorMsg = '请填写账号';
                self.fieldClass.usernameError = true;
                self.showErrorAnimate($('input[name="userName"]'));
                return;
              }
              if (!self.loginForm.password) {
                self.errorMsg = '请填写密码';
                self.fieldClass.passwordError = true;
                self.showErrorAnimate($('input[name="password"]'));
                return;
              }
              if (!self.loginForm.code) {
                self.errorMsg = '请填写验证码';
                self.fieldClass.codeError = true;
                self.showErrorAnimate($('input[name="code"]'));
                return;
              }
              if (self.loginForm.code.length < 4) {
                self.errorMsg = '验证码小于4位数';
                self.fieldClass.codeError = true;
                self.showErrorAnimate($('input[name="code"]'));
                return;
              }
              //锁定按钮
              self.$lockButton('login-form');
              //按钮的内容改为进入中...
              $('a.btn-primary').html('进入中...').css({background:"#1e7ab7"});
              $("body").css({cursor: 'wait'});//光标变为等待
              self.$doPost('/admin/login',self.loginForm,function(resp){ //{data:{},code:0,message:''}
                  self.$unlockButton('login-form');
                  $("body").css({cursor: ''});
                  if(resp && resp.code ===self.global_config.SUCCESS_CODE){
                    // 保存当前登录用户信息
                    self.$clearSessionCache(); //清空sessionstroe和vuex store
                    self.$saveStorage('realName',resp.data.realName);
                    self.$saveStorage('userName',resp.data.userName);
                    self.$saveStorage('permissions',resp.data.permissionsList);
                    self.$goDefaultPage();//跳转到首页
                  }else if(resp && resp.message){
                    $('a.btn-primary').html('进&nbsp;&nbsp;入');
                    self.errorMsg = resp.message;
                  }
              });
          },
          doReset: function(){
            var self = this;
            if (self.$isLockedButton('login-form')) {
              return;
            }
            self.loginForm.userName = '';
            self.loginForm.password = '';
            self.loginForm.code = '';
            self.fieldClass.usernameError = false;
            self.fieldClass.passwordError = false;
            self.fieldClass.codeError = false;
            self.errorMsg = '';
            $('input[name="userName"]').focus();//用户名输入框获得焦点
          },
          //错误的时候的动画效果
          showErrorAnimate: function ($obj) {
            $obj.parents('.item').addClass('shake');
            setTimeout(function(){$obj.parents('.item').removeClass('shake')}, 200);
          },
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .wrapper{top:0;}
  .wrapper .container{position:absolute;left:0;top:0;right:0;bottom:0;padding:0;margin:0;overflow:auto;width:100%;height:100%;min-width:660px;}
  .single-login .banner{color:#fff;text-align:center;height:360px;}
  .single-login .banner .banner-background{min-width:1100px;overflow:hidden;position:relative;height:360px;}
  .single-login .banner .banner-background .background-img{width:1920px;z-index:-1;height:360px;text-align:center;margin:0 0 0 -960px;top:0;left:50%;position:absolute;}
  .slider-login{position:relative;min-width:1100px;overflow:hidden;height:400px;}
  .slider-login-wrapper{position:absolute;width:413px;left:50%;margin:0 0 0 -206px;text-align:center;}
  .slider-login .item{border:1px solid #ddd;margin-top:20px;position:relative;}
  .slider-login .item:hover{border:1px solid #337ab7;}
  .slider-login .item-half{width:60%;}
  .slider-login .label{float:left;height:40px;width:40px;line-height:40px;margin:-1px;background:#337ab7;padding:0;border-radius:0;font-size:18px;color:#fff;}
  .slider-login .text{overflow:hidden;position:relative;color:#ddd;}
  .slider-login .text input, .login-tab .text input{height:38px;line-height:20px;padding:9px;width:100%;border:0;position:relative;z-index:1;background:none;outline:none;color:#333;}
  .slider-login .focus,.slider-login .focus .label{border-color:#337ab7;}
  .slider-login .error,.slider-login .error:hover,.slider-login .error .label{border-color:#ff0000;}
  .slider-login .error .label{background:#ff0000;}
  .slider-login .placeholder, .login-tab .placeholder{position:absolute;left:10px;top:0;line-height:38px;color:#999;}
  .slider-login .icon-man span, .slider-login .icon-password span, .slider-login .icon-captcha{display:block;height:24px;width:24px;text-indent:-999px;overflow:hidden;margin:7px auto;}
  .slider-login .icon-captcha{background-position:-174px -206px;}
  .slider-login .forgot{overflow:hidden;padding:20px 0;}
  .slider-login .forget{float:right;}
  .slider-login .forget a{margin:0 5px;color:#444;font-size:12px;}
  .slider-login .submit{overflow:hidden;width:100%;padding-top:30px;}
  .slider-login .submit a{padding:8px;border-radius:0;width:48%;float:left;font-size:18px;}
  .slider-login .submit a:last-child{margin-left:4%;}
  .slider-login .captcha{position:absolute;top:0;margin:0 0 0 10px;left:100%;width:62%;}
  .slider-login .captcha img{height:40px;width:90px;margin:-1px 4px 0 0;overflow:hidden;float:left;}
  .slider-login .captcha a{padding:11px 0;color:#999;display:inline-block;position:relative;}
  .slider-login .refresh{font-size:14px;color:#999;position:absolute;top:50%;right:0;margin-top:-7px;}
  .slider-login .errorMsg{color:#ff0000;text-align:left;padding-top:10px;margin-bottom:-20px;}
  .slider-login .shake{-webkit-animation:shake-horizontal 200ms;-ms-animation:shake-horizontal 200ms;animation:shake-horizontal 200ms;}


  /*新增*/
  .slider-login .submit{position:relative;}
  .slider-login .submit a{display:inline-block;vertical-align:top;}
  .slider-login .submit .enter{padding:0;line-height:40px;font-size:18px;color:#fff;width:205px;height:40px;}
  .slider-login .submit .forget{font-size:14px;position:absolute;top:5px;right:35px;}
  .slider-login .reset a{width:43.4%;margin:30px auto 0;font-size:18px;padding:10px;}
  .slider-login .newCaptcha{width:100%;left:90%;}
  .slider-login .newCaptcha a{color:#fff;text-align:center;padding:8px 30px;display:inline-block;font-size:14px;}
  .slider-login .newCaptcha .again{position:absolute;right:-100px;top:0;background-color:#777}


  @-webkit-keyframes shake-horizontal {
    0% {-webkit-transform: translate(0px, 0px)}
    20% {-webkit-transform: translate(5px, 0px)}
    40% {-webkit-transform: translate(-5px, 0px)}
    60% {-webkit-transform: translate(5px, 0px)}
    80% {-webkit-transform: translate(-5px, 0px)}
  }
  @keyframes shake-horizontal {
    0% {transform: translate(0px, 0px)}
    20% {transform: translate(5px, 0px)}
    40% {transform: translate(-5px, 0px)}
    60% {transform: translate(5px, 0px)}
    80% {transform: translate(-5px, 0px)}
  }
</style>
